<template>
  <ComCard>
    <div slot="com_header">
      <el-row :gutter="20">
        <el-col :span="10">
          <el-input
            placeholder="请输入内容"
            v-model="formObj.query"
            class="input-with-select"
          >
            <el-button
              slot="append"
              @click="queryOen"
              icon="el-icon-search"
            ></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="tianjia"
            ><i class="el-icon-plus"></i>添加</el-button
          >
        </el-col>
      </el-row>

      <!-- 添加的弹框 -->
      <!-- :before-close="handleClose" -->
      <el-dialog
        title="添加用户"
        :visible.sync="dialogVisible"
        :closeOnClickModal="false"
        width="30%"
      >
        <el-form label-width="80px" style="width: 350px" :model="usersObj">
          <el-form-item label="用户名称">
            <el-input type="text" v-model="usersObj.username"></el-input>
          </el-form-item>

          <el-form-item label="密码">
            <el-input type="password" v-model="usersObj.password"></el-input>
          </el-form-item>

          <el-form-item label="电子邮箱">
            <el-input type="text" v-model="usersObj.email"></el-input>
          </el-form-item>

          <el-form-item label="手机号">
            <el-input type="text" v-model="usersObj.mobile"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </span>
      </el-dialog>
    </div>

    <div slot="com_content">
      <el-row>
        <el-table :data="userObj" border :model="userObj">
          <el-table-column label="序号" type="index"></el-table-column>
          <el-table-column label="用户名" prop="username"></el-table-column>
          <el-table-column label="邮箱地址" prop="email"></el-table-column>
          <el-table-column label="电话" prop="mobile"></el-table-column>
          <el-table-column label="角色" prop="role_name"></el-table-column>
          <el-table-column label="状态">
            <template #default="{ row }">
              <el-switch
                v-model="row.mg_state"
                active-color="#13ce66"
                inactive-color="#ff4949"
                @change="ztai(row)"
              >
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column
            label="创建时间"
            prop="create_time"
          ></el-table-column>

          <el-table-column label="操作">
            <template #default="{ row }">
              <el-tooltip content="修改用户信息" placement="top">
                <el-button
                  type="primary"
                  icon="el-icon-edit"
                  circle
                  @click="bianji(row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  circle
                  @click="del(row.id)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="分配角色" placement="top">
                <el-button
                  @click="role(row)"
                  type="warning"
                  icon="el-icon-setting"
                  circle
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </el-row>

      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="formObj.pagenum"
        :page-sizes="[2, 4, 6, 8]"
        :page-size="formObj.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>

      <!-- 这里是点击编辑按钮时触发的弹框 -->
      <el-dialog
        title="用户信息维护"
        :visible.sync="bianjitk"
        width="30%"
        :close-on-click-modal="false"
      >
        <el-form :model="fromObj" label-width="80px">
          <el-form-item label="用户名">
            <el-input
              type="text"
              v-model="fromObj.username"
              :disabled="true"
            ></el-input>
          </el-form-item>
          <el-form-item label="邮箱地址">
            <el-input type="text" v-model="fromObj.email"></el-input>
          </el-form-item>
          <el-form-item label="联系方式">
            <el-input type="text" v-model="fromObj.mobile"></el-input>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="bianjitk = false">取 消</el-button>
          <el-button type="primary" @click="bj">确 定</el-button>
        </span>
      </el-dialog>

      <!-- 分配角色的弹框 -->
      <el-dialog
        title="分配角色"
        :visible.sync="fpjs"
        width="30%"
        :close-on-click-modal="false"
      >
        <el-form>
          <el-form-item label="用户名">{{ fpObj.username }}</el-form-item>
          <el-form-item label="测试角色">{{ fpObj.role_name }}</el-form-item>
          <el-form-item label="活动区域">
            <el-select v-model="rolrle" placeholder="请选择">
              <el-option
                v-for="item in selectObj"
                :key="item.id"
                :label="item.roleName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="fpjs = false">取 消</el-button>
          <el-button type="primary" @click="fenpei">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </ComCard>
</template>

<script>
import {
  api_query,
  api_delete,
  api_save,
  api_upset,
  api_bianji,
  api_fenpei,
  api_fp,
} from "../../api/user.js";
import ComCard from "../../components/comCard";
export default {
  components: {
    ComCard,
  },
  data() {
    return {
      bianjitk: false, //修改的弹框
      fpjs: false, //分配角色的弹窗
      dialogVisible: false, //添加弹框的开关状态
      mg_state: true,
      formObj: {
        query: "",
        pagenum: 1,
        pagesize: 2,
      },
      total: 0,
      userObj: [],

      usersObj: {
        id: "",
        username: "",
        password: "",
        email: "",
        mobile: "",
      },
      // 编辑
      fromObj: {},

      selectObj: [], //下拉框
      rolrle: "", //绑定的下拉框
      fpObj: {},
    };
  },
  mounted() {
    this.queryOen();
  },
  methods: {
    // 分配角色弹窗
    async role(row) {
      this.fpjs = true;
      let rst = await api_fenpei();
      this.selectObj = rst.data;
      this.fpObj = row; //记录当前的用户信息
    },
    async fenpei() {
      let rst = await api_fp({ uId: this.fpObj.id, rid: this.rolrle });
      let { msg, status } = rst.meta;
      this.fpObj.status = status;
      if (status == 200) {
        this.fpjs = false;
        this.queryOen();
        this.$message.success(msg);
      }
    },

    // 点击编辑时触发的函数
    bianji(row) {
      this.bianjitk = true;
      let { id, email, mobile, username } = row;
      // 回填值
      this.fromObj = { id, email, mobile, username };
    },
    async bj() {
      let rst = await api_bianji(this.fromObj);
      console.log(rst);
      let { msg, status } = rst.meta;
      this.fromObj.status = status;
      if (status == 200) {
        this.queryOen();
        this.bianjitk = false;
        this.$message.success(msg);
      }
    },

    // 修改用户状态
    async ztai(row) {
      let rst = await api_upset({ uId: row.id, type: row.mg_state });
      let { msg, status } = rst.meta;
      this.userObj.status = status;
      if (status == 200) {
        this.$message.success(msg);
        this.queryOen();
      }
      console.log(rst);
    },

    // 点击添加时触发的函数
    tianjia() {
      let { username, password, email, mobile } = this.usersObj;
      this.usersObj = {
        username,
        password,
        email,
        mobile,
      };
      this.dialogVisible = true;
      this.queryOen();
    },
    // 点击确认按钮时触发的函数
    async save() {
      let rst = await api_save(this.usersObj);
      let { msg, status } = rst.meta;
      this.usersObj.status = status;
      if (status == 201) {
        //当点击确认按钮时弹框里的内容自动清空
        this.usersObj.username = "";
        this.usersObj.password = "";
        this.usersObj.email = "";
        this.usersObj.mobile = "";
        this.dialogVisible = false;
        this.queryOen();
        this.$message({
          type: "success",
          message: "添加成功",
        });
      } else {
        this.$message.error("添加失败");
      }
    },

    // 分页
    handleSizeChange(val) {
      this.formObj.pagesize = val;
      this.queryOen();
    },
    handleCurrentChange(val) {
      this.formObj.pagenum = val;
      this.queryOen();
    },
    // 获取用户信息的
    async queryOen() {
      let rst = await api_query(this.formObj);
      let { total, users } = rst.data;
      this.total = total;
      this.userObj = users;
      // console.log(this.userObj);
    },
    // 点击删除出发的函数
    async del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let rst = await api_delete(id);
          let { msg, status } = rst;
          this.status = status;
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.queryOen();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style lang="less" scoped>
</style>